<template>
	<scroll-view class="scroll" scroll-y>
		<u-card v-for="(pItem,pIndex) in opts" :title=pItem.name :show-foot="false" :index="pIndex" :key="pIndex"
			margin="20rpx" padding="20" :full="full" :thumb="thumb">
			<view slot="body">
				<u-grid :col="col" :border="false">
					<u-grid-item v-for="(cItem, cIndex) in pItem.children" :index="cIndex" :key="cIndex"
						@click="gridClick(cItem)" :custom-style="customStyle">
						<u-image :width="size" :height="size" :src="cItem.icon"></u-image>
						<text class="grid-text">{{ cItem.name }}</text>
					</u-grid-item>
				</u-grid>
			</view>
		</u-card>
	</scroll-view>
</template>

<script>
	export default {
		name: 'SOptGridU',
		props: {
			opts: {
				type: Array,
				default () {
					return []
				}
			},
			col: {
				type: Number,
				default: 4
			},
			full: {
				type: Boolean,
				default: false
			},
			thumb: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				size: "40px",
				// customStyle: {
				// 	padding: '20rpx 0'
				// }
			}
		},
		methods: {
			gridClick(val) {
				if (val.status == 0) {
					uni.showToast({
						title: '暂未开放,敬请期待',
						icon: 'none',
						duration: 2000
					});
				} else {
					uni.navigateTo({
						url: val.path
					})
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.scroll {
		flex-direction: column;
		flex: 1;
	}

	.grid-text {
		font-size: 28rpx;
		// color: $u-type-info;
	}
</style>
